  var renderer;
  var FORBIDED_NAME = "freeze_QWorld";

  var GRID_WODTH = 200;
  var GRID_NUM = 20;

  var worldControls;
  var activeObject = new THREE.Object3D();
  
  // var stats;
  function initThree (width,height) {
     // body...
    renderer = new THREE.WebGLRenderer({antialias : true});
    renderer.setSize(width,height);
    document.getElementById("canvas-frame").appendChild(renderer.domElement);
    renderer.domElement.id = "canvas";
    renderer.setClearColor(0xcccccc,1.0);
  }

  var scene;
  function initScene () {
     // 
    scene = new THREE.Scene();
    initGrid();
  }

  var camera;
  function initCamera (width,height) {
     // body...  
     camera = new THREE.PerspectiveCamera( 45, width/height, 0.01, 10000000000);
     camera.position.z = GRID_WODTH * Math.sqrt(2);
     camera.position.y = GRID_WODTH * Math.sqrt(2) * Math.tan(40 * Math.PI / 180);
     camera.position.x = GRID_WODTH * Math.sqrt(2);
     camera.lookAt({
      x:0,
      y:0,
      z:0
     });

     //相机控制器
     worldControls = new THREE.OrbitControls(camera,renderer.domElement);
     worldControls.target.set(0,0,0);
     worldControls.rotateSpeed = 0.5;
     worldControls.zoomSpeed = 0.5;
     // worldControls.keyPanSpeed = 0.5;
     // worldControls.update();
     
  }

  var light;
  function initLight () {
     // body... 
     // light = new THREE.DirectionalLight( 0xffffff, 1.0);
     light = new THREE.AmbientLight( 0xffffff,0.5);
     light.position.set(100,100,100);
     scene.add(light);

     light = new THREE.DirectionalLight( 0xffffff );
     light.position.set(100,100,100);
     scene.add(light);

     light = new THREE.PointLight(0xffffff);
     light.position.set(0,0,100000000);
     // scene.add(light);
     // alert("light");
     // var dirLight = new THREE.DirectionalLight( 0xffffff );
     //    dirLight.position.set( 200, 200, 1000 ).normalize();
     //    camera.add( dirLight );
     //    camera.add( dirLight.target );
  }

  var mesh;
  function initObject () {
    var geometry = new THREE.CylinderGeometry( 10,10, 30);
    var material = new THREE.MeshBasicMaterial({color:0x90ffff});
    mesh = new THREE.Mesh( geometry, material);
    mesh.rotation.x = 40 * Math.PI / 180;
    mesh.position.x = 0;
    mesh.position.y = 0;
    mesh.position.z = 0;
    scene.add(mesh);
  }


// var mouse = new THREE.Vector2(), INTERSECTED;
  
function render () {
     // body...  
     // renderer.clear();
    renderer.render(scene,camera);
    requestAnimationFrame(render);
    camera.updateProjectionMatrix();
    control.update();
    if(activeObject.type != undefined && activeObject.type == "DirectionalLight"){
       activeObject.update();
       activeObject.position.set(activeObject.light.position.x,activeObject.light.position.y,activeObject.light.position.z);
       activeObject.cube.position.set(activeObject.light.position.x,activeObject.light.position.y,activeObject.light.position.z);
      }

      if(activeObject.type != undefined && activeObject.type == "SpotLight"){
       activeObject.update();
       activeObject.position.set(activeObject.light.position.x,activeObject.light.position.y,activeObject.light.position.z);
       activeObject.cube.position.set(activeObject.light.position.x,activeObject.light.position.y,activeObject.light.position.z);
     }

     if(activeObject.controlGeometry != undefined && activeObject.controlGeometry.length > 0){
        var tempInverse = new THREE.Matrix4();
        tempInverse.getInverse(activeObject.matrix);
        //通过小球控制点的位置，进而控制Mesh的形状
        if(control.object != undefined &&  control.object.type == "helper"){
           for(index in activeObject.geometry.vertices){
          var tempVector = new THREE.Vector4( activeObject.controlGeometry[index].position.x, 
            activeObject.controlGeometry[index].position.y, activeObject.controlGeometry[index].position.z, 1 );
          tempVector.applyMatrix4 (tempInverse);
       
          activeObject.geometry.vertices[index].x = tempVector.x;
          activeObject.geometry.vertices[index].y = tempVector.y;
          activeObject.geometry.vertices[index].z = tempVector.z;    
          }
        }
          else if(activeObject.controlGeometry.length == activeObject.geometry.vertices.length){
            //对Mesh进行变换 实时更改所有小球的位置
            var controlGeometry = activeObject.controlGeometry;
            
             for(var i = 0;i < activeObject.controlGeometry.length;i++){
              var x = activeObject.geometry.vertices[i].x;
              var y = activeObject.geometry.vertices[i].y;
              var z = activeObject.geometry.vertices[i].z;
              var tempVector = new THREE.Vector3( x, y, z );
            
            tempVector.applyMatrix4(activeObject.matrix);
              
             controlGeometry[i].position.x = tempVector.x;
             controlGeometry[i].position.y = tempVector.y;
             controlGeometry[i].position.z = tempVector.z;
             }
             // console.log('物体');
          }
      
       
        activeObject.geometry.verticesNeedUpdate = true;
                activeObject.geometry.computeFaceNormals();
        // activeObject.geometry.vertices = activeObject.controlGeometry;
        // console.log('更改vertices没问题');
     }

    // var temp = manager.getBoxProperties(manager.getMeshProperties());
    // propertyPanel.update(temp,activeObject);
    //刷新面板
    // propertyPanel.positionX.value = activeObject.position.x;
    // propertyPanel.positionY.value = activeObject.position.y;
    // propertyPanel.positionZ.value = activeObject.position.z;

    // propertyPanel.rotationX.value = activeObject.rotation.x;
    // propertyPanel.rotationY.value = activeObject.rotation.y;
    // propertyPanel.rotationZ.value = activeObject.rotation.z;

    // propertyPanel.scaleX.value = activeObject.scale.x;
    // propertyPanel.scaleY.value = activeObject.scale.y;
    // propertyPanel.scaleZ.value = activeObject.scale.z;
    //  stats.update();
    //  TWEEN.update();

  }

  // function initTween(){
  //   new TWEEN.Tween(mesh.position).to({y:-300},3000).repeat(Infinity).start();
  // }

  function initGrid(){
    // var grid = new THREE.GridHelper(100, 8);
    // scene.add(grid);
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( -GRID_WODTH, 0, 0 ));
    geometry.vertices.push(new THREE.Vector3( GRID_WODTH, 0, 0 ));
    for(var i = 0;i < GRID_NUM * 2 + 1;i++){
      if (i == GRID_NUM) {
        var material = new THREE.LineBasicMaterial({color:0x707070,opacity:0.8});
      }
      else{
        var material = new THREE.LineBasicMaterial({color:0xa0a0a0,opacity:0.2});
      }
      var line = new THREE.Line(geometry,material);
      line.position.z = -GRID_WODTH + i * GRID_WODTH / GRID_NUM;
      line.name = FORBIDED_NAME;
      scene.add(line);

      var line = new THREE.Line(geometry,material);
      line.position.x = -GRID_WODTH + i * GRID_WODTH / GRID_NUM;
      line.rotation.y = 90 * Math.PI / 180;
      line.name = FORBIDED_NAME
      scene.add(line);
    }
  }


var control;
function initObjectController(){
    control = new THREE.TransformControls( camera, renderer.domElement );
    scene.add( control ); 
    window.addEventListener( 'keydown', function ( event ) {
          switch ( event.keyCode ) {
            case 81: // Q
              control.setSpace( control.space === "local" ? "world" : "local" );
              break;
            case 17: // Ctrl
              control.setTranslationSnap( 100 );
              control.setRotationSnap( THREE.Math.degToRad( 15 ) );
              break;
            case 87: // W
              toolsController.moveControl.click();
              // control.setMode( "translate" );
              break;
            case 69: // E
              toolsController.rotateControl.click();
              // control.setMode( "rotate" );
              break;
            case 82: // R
              toolsController.scaleControl.click();
              // control.setMode( "scale" );
              break;
            case 187:
            case 107: // +, =, num+
              control.setSize( control.size + 0.1 );
              break;
            case 189:
            case 109: // -, _, num-
              control.setSize( Math.max( control.size - 0.1, 0.1 ) );
              break;
          }
        }); 
}   

var manager;
 function threeStart(width,height) {
     // 初始化three.js的基础物件

     initThree(width,height);
     initScene();
     initCamera(width,height);

     // initLight();
     initObjectController();//这里是控制的部分，以后想办法分出来
     // selectLoader();

    //选择某一个物体
    var objectSelector = new ObjectSelector();
    objectSelector.select(document.getElementById("canvas-frame"));
    // raycaster = new THREE.Raycaster();

    manager = new ObjectsManager();
    var buildController = new BuildController();
    toolsController = new ToolsController();
    renderer.shadowMapEnabled = true;
    
     // initTween();
     // initObject();
     // var textG = new THREE.Geometry();
     // textG.vertices.push(new THREE.Vector3( 0, 0, 0 ),new THREE.Vector3( 5, 5,5));
     // var line = new THREE.Line(textG,new THREE.LineBasicMaterial({color: 0x0000ff}));
     // scene.add(line);
     
     render();

     // svgMaker = new SVGMaker();//用拉斐尔那个SVG库
  }

function threeUpdate(width,height){
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize( width, height );
}